<template>
	<view class="addressInfo-wrap">
		<uni-forms label-width="100" :rules="rules" :value="formData" ref="form" err-show-type="toast">
			<uni-forms-item label="收货人姓名" name="name">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="20" type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="手机号码" name="phone">
				<uni-easyinput @input="checkDisabledBtn" :maxlength="11" type="number" v-model="formData.phone" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item label="所在地区" name="province">
				<u-address-picker @change="addressChange" :level="3">
					<view class="addressInfo-right">
						<view v-if="!formData.province" class="addressInfo-select">请选择省份、城市、区县</view>
						<image v-if="!formData.province" class="addressInfo-next" src="http://k8s.vendingtech.vip/images/next_icon@2x.png"></image>
						<view v-if="formData.province" class="addressInfo-value">
							{{ formData.province == formData.city ? formData.city + formData.district : formData.province + formData.city + formData.district }}
						</view>
					</view>
				</u-address-picker>
			</uni-forms-item>
			<uni-forms-item label="详细地址" name="address">
				<uni-easyinput type="text" v-model="formData.address" @input="checkDisabledBtn" placeholder="请输入详细地址" />
			</uni-forms-item>
			<uni-forms-item label="设为默认地址" name="isDefault">
				<view class="addressInfo-radio" @click="switchDefault">
					<image v-if="!formData.isDefault" src="http://k8s.vendingtech.vip/images/address_gray@2x.png"></image>
					<image v-if="formData.isDefault" src="http://k8s.vendingtech.vip/images/pay_success@2x.png"></image>
				</view>
			</uni-forms-item>
		</uni-forms>

		<u-bottom-button v-if="!id" value="保存地址" @click="formSubmit(0)"></u-bottom-button>

		<view v-if="id" class="addressInfo-bottom iphonex-footer">
			<view class="addressInfo-bottom-box">
				<view class="addressInfo-bottom-delete" @click="deleteAddress">删除地址</view>
				<view class="addressInfo-bottom-save" @click="formSubmit(1)">保存地址</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
import uniEasyinput from '@/components/uni/uni-easyinput/uni-easyinput.vue';
import uniForms from '@/components/uni/uni-forms/uni-forms.vue';
import uniFormsItem from '@/components/uni/uni-forms-item/uni-forms-item.vue';
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import uAddressPicker from '../u-address-picker/u-address-picker.vue';
export default {
	components: {
		uniForms,
		uniFormsItem,
		uniEasyinput,
		uniPopup,
		uAddressPicker
	},
	data() {
		return {
			id: null,
			disabled: true,
			rules: {
				name: {
					rules: [
						{
							required: true,
							message: '请填写收货人姓名'
						}
					]
				},
				phone: {
					rules: [
						{
							required: true,
							message: '请填写手机号码'
						},
						{
							pattern: '^1[3456789]\\d{9}$',
							errorMessage: '请填写正确的手机号格式'
						}
					]
				},
				province: {
					rules: [
						{
							required: true,
							message: '请选择所在地区'
						}
					]
				},
				address: {
					rules: [
						{
							required: true,
							message: '请填写详细地址'
						}
					]
				}
			},
			formData: {
				name: '',
				phone: '',
				address: '',
				province: '',
				city: '',
				district: '',
				isDefault: false
			}
		};
	},
	onLoad(option) {
		this.id = option.id;
	},
	onShow() {
		if (this.id) {
			this.patientAddress();
		}
	},
	methods: {
		addressChange(result) {
			this.formData.province = result.data[0].name;
			this.formData.provinceCode = result.data[0].id;
			this.formData.city = result.data[1].name;
			this.formData.cityCode = result.data[1].id;
			this.formData.district = result.data[2].name;
			this.formData.districtCode = result.data[2].id;
			this.checkDisabledBtn();
		},

		//切换默认地址
		switchDefault() {
			this.formData.isDefault = !this.formData.isDefault;
		},

		//校验按钮
		checkDisabledBtn() {
			let b = false;
			Object.keys(this.formData).forEach(key => {
				if (this.formData[key] === '') {
					b = true;
				}
			});
			this.disabled = b;
		},

		//校验表单
		formSubmit(type) {
			this.$refs.form
				.submit()
				.then(res => {
					if (type == 0) {
						this.addAddress();
					} else {
						this.updateAddress();
					}
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},

		//添加地址
		addAddress() {
			this.$api
				.addAddress({
					data: this.formData
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta:1
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//删除地址
		deleteAddress() {
			uni.showModal({
				title: '确认要删除该地址吗？',
				success: res => {
					if (res.confirm) {
						this.$api
							.deleteAddress({
								params: {
									id: this.id
								}
							})
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									});
									uni.navigateBack({
										delta:1
									});
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							});
					}
				}
			});
		},

		//地址详情
		patientAddress() {
			this.$api
				.patientAddress({
					params: {
						id: this.id
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.formData = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//修改地址信息
		updateAddress() {
			this.$api
				.updateAddress({
					data: this.formData
				})
				.then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta:1
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		}
	}
};
</script>

<style lang="less">
@import './addressInfo.less';
</style>
